<template>
  <el-submenu :index="itemData.id" v-if="itemData.children && itemData.menuType !== '1'">
    <template slot="title">
      <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i>
      <span slot="title">{{itemData.menuName}}</span>
    </template>
    <menu-item
      v-for="(item, index) in itemData.children"
      :key="index"
      :item-data="item"></menu-item>
  </el-submenu>
  <el-menu-item :index="itemData.id" v-else>
    <template v-if="isCollapse">
      <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i>
    </template>
    <template v-else slot="title">
      <router-link :to="itemData.menuRouter" class="menu-link">
        <i v-if="itemData.menuIcon" class="menu-icon" :class="itemData.menuIcon"></i>
        {{itemData.menuName}}
      </router-link>
    </template>
  </el-menu-item >
</template>

<script>
export default {
  name: "MenuItem",
  props:{
    itemData: Object,
    isCollapse: Boolean
  }
}
</script>

<style scoped>

</style>